<include file="Public:header" />
<link type="text/css" href="__CSS__/house_news.css" rel="stylesheet" />
<link type="text/css" href="__CSS__/price.css" rel="stylesheet" />
<div class="main">
<include file="House:nav" />
    <div class="main_center">
        <div class="price_div1">
            <div class="price_div">
                <div class="price_title">
                    <div class="left_title">{$house.title} 价格走势</div>
                </div>
                <div class="price_radio">
                    <label><input type="radio" checked="checked" name="date" value="3"> 三个月</label>
                    <label><input type="radio" name="date" value="6"> 六个月</label>
                    <label><input type="radio" name="date" value="1"> 全部</label>
                    <input type="hidden" value="{$info.id}" id="house_id">
                </div>
                <div class="price_line">
                    <div id="price" style="height:380px;border:1px solid #ccc;padding:10px;"></div>
                </div>
            </div>

            <!--列表显示-->
            <div class="table_div">
                <table class="price-list">
                    <tbody>
                    <tr>
                        <th width="141">记录时间</th>
                        <th width="141">最低价</th>
                        <th width="141">均价</th>
                        <th width="141">最高价</th>
                        <th>价格描述</th>
                    </tr>
                    <volist name='price_list' id='vo'>
                        <tr>
                            <td>{$vo.add_time|date='Y-m-d',###}</td>
                            <td>{$vo.min_price}</td>
                            <td>{$vo.average_price}</td>
                            <td>{$vo.max_price}</td>
                            <td>{$vo.info}</td>
                        </tr>
                    </volist>
                    </tbody>
                </table>
                <div class="plastic_bottom_pages">
                    {$page}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="__JS__/jquery.js"></script>
    <script type="text/javascript" src="__JS__/layer/layer.js"></script>
    <script type="text/javascript" src="__JS__/public.js"></script>
    <script src="__JS__/baidu/build/dist/echarts.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            ajaxPrice(3);
        });
        $("input[name='date']").click(function(){
            var v = $(this).val();
            ajaxPrice(v);
        });
        function ajaxPrice(days){
            $.ajax({
                type: "POST",
                url: "{:U('House/line')}",
                data: {'days': days,'house_id':$("#house_id").val()},
                cache: false,
                dataType: 'json',
                success: function (data) {
                    var code = data['code'];
                    if (code == 1) {
                        line(data);
                    }else{
                        alert("获取不到对应的价格信息");
                    }
                }
            });
        }
        function line(d){
            require.config({
                paths: {
                    echarts: "__JS__/baidu/build/dist"
                }
            });
            require(
                    [
                        'echarts',
                        'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
                        'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                    ],
                    function (ec) {
                        //--- 折柱 ---
                        var myChart = ec.init(document.getElementById('price'));
                        myChart.setOption({
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['起价','均价约','最高价']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data:d['categories']
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'最低价',
                                    type:'line',
                                    stack: '总量',
                                    data:d['num']['min_price']
                                },
                                {
                                    name:'均价约',
                                    type:'line',
                                    stack: '总量',
                                    data:d['num']['average_price']
                                },
                                {
                                    name:'最高价',
                                    type:'line',
                                    stack: '总量',
                                    data:d['num']['max_price']
                                }]
                        });

                    }
            );
        }
    </script>
<include file="Public:footer" />